let navOutP = document.querySelectorAll(".box>.nav>div:last-child>div>div>a>p");
let navOutPdiv = document.querySelectorAll(".box>.nav>div:last-child>div>div");
let navDiv = document.querySelectorAll(".box>.nav>div:last-child>div>div>div");
let nav = document.querySelector(".box>.nav");
let navOn = document.querySelector(".box>.content>.content-header>div:first-child>div:first-child>img");
let content = document.querySelector(".box>.content");
let contentBox = document.querySelector(".box>.content");
contentBox.style.height = nav.offsetHeight + "px";
let divState = document.querySelectorAll(".divState");
navOutPdiv[5].style.height = navDiv[5].offsetHeight + 40 + "px";
for (let i = 0; i < navOutP.length; i++) {
    (function (n) {
        navOutP[i].addEventListener("click", function (e) {
            for (var j = 0; j < navOutPdiv.length; j++) {
                navOutPdiv[j].style.height = "40px";
            }
            if (getComputedStyle(navOutPdiv[n]).height == "40px") {
                navOutPdiv[n].style.height = navDiv[n - 1].offsetHeight + 40 + "px";
            } else {
                navOutPdiv[n].style.height = "40px";
            }
            contentBox.style.height = nav.offsetHeight + "px";
        });
    })(i);
}
navOn.addEventListener("click", function (e) {
    // if(getComputedStyle(nav).display == "none"){
    //     nav.style.transition="all 0.5s";
    //     nav.style.display="block";
    //     setTimeout(function() {
    //         nav.style.width="255px";
    //     }, 10);
    // }else{
    //     nav.style.transition="all 0.5s";
    //     setTimeout(function() {
    //         nav.style.width="0px";
    //     }, 10);
    //     setTimeout(function() {
    //         nav.style.display="none";
    //     },510);
    // }
    content.style.transition = "all 0.5s";
    navOn.style.transition = "all 0.5s";
    document.querySelector(".box").style.transition = "all 0.5s";
    if (getComputedStyle(content).marginLeft == "0px") {
        nav.style.zIndex = -1;
        setTimeout(function () {
            for (var j = 0; j < navOutPdiv.length; j++) {
                navOutPdiv[j].style.height = "40px";
            }
            navOn.style.transform = "rotate(180deg)";
            content.style.marginLeft = "-" + getComputedStyle(nav).width;
            document.querySelector(".box").style.width = "100%";
        }, 10);
    } else {
        nav.style.zIndex = "";
        setTimeout(function () {
            navOn.style.transform = "";
            content.style.marginLeft = "";
            document.querySelector(".box").style.width = "";
        }, 10);
    }
});


// for (let i = 0; i < divState.length; i++) {
//         divState[i].addEventListener("click", function(e) {
//             this.children[0].style.transition = "all .3s";
//             this.style.transition = "all .3s";
//             if(this.children[0].offsetLeft== 1){
//                 this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 +"px";
//                 this.style.backgroundColor = "#1890ff";
//             }else{
//                 this.children[0].style.left= "1px";
//                 this.style.backgroundColor = "";
//             }
//         });
// }
// function tsk(text, fun) {
//     var div1 = document.createElement("div");
//     var body = document.body;
//     var div = document.createElement("div");
//     var head = document.createElement("div");
//     var headX = document.createElement("div");
//     var content = document.createElement("div");
//     var contentCon = document.createElement("div");
//     var footer = document.createElement("div");
//     body.style.position = "relative";
//     body.appendChild(div1);
//     div1.appendChild(div);
//     div.appendChild(head);
//     div.appendChild(content);
//     div.appendChild(footer);
//     head.appendChild(headX);
//     content.appendChild(contentCon);
//     headX.innerHTML = "X";
//     div1.id = "tsk";
//     div1.style.display = "block";
//     div1.style.position = "absolute";
//     div1.style.zIndex = "100";
//     div1.style.left = "0";
//     div1.style.top = "0";
//     div1.style.width = body.scrollWidth + "px";
//     div1.style.height = body.scrollHeight + "px";
//     div1.style.background = "rgba(0, 0, 0, 0.4)";
//     div.style.display = "block";
//     div.style.position = "absolute";
//     div.style.minWidth = "30vw";
//     div.style.minHeight = "100px";
//     div.style.top = "calc(0px + " + document.documentElement.scrollTop + "px)";
//     div.style.transition = "all 0.5s";
//     setTimeout(function () {
//         div.style.top = "calc(50px + " + document.documentElement.scrollTop + "px)";
//     }, 10);
//     div.style.background = "rgba(255, 255, 255, 1)";
//     div.style.borderRadius = "10px";
//     div.style.boxShadow = "0 0 5px";
//     head.style.width = "100%";
//     head.style.height = "50px";
//     head.style.borderBottom = "2px solid rgba(110, 110, 110 , .3)";
//     head.style.display = "flex";
//     head.style.justifyContent = "flex-end";
//     head.style.alignItems = "center";
//     headX.style.width = "50px";
//     headX.style.height = "50px";
//     headX.style.display = "flex";
//     headX.style.alignItems = "center";
//     headX.style.justifyContent = "center";
//     headX.style.cursor = "pointer";
//     content.style.width = "100%";
//     content.style.height = "100% - 50px";
//     content.style.display = "flex";
//     content.style.alignItems = "center";
//     content.style.justifyContent = "center";
//     content.style.padding = "20px 0px";
//     contentCon.style.width = "80%";
//     contentCon.style.minHeight = "50px";
//     contentCon.style.wordBreak = "break-all";
//     contentCon.style.overflow = "hidden";
//     contentCon.innerHTML = text;
//     footer.style.width = "100%";
//     footer.style.display = "flex";
//     footer.style.alignItems = "center";
//     footer.style.justifyContent = "flex-end";
//     footer.innerHTML = `
//         <button type="button" style="margin:20px 10px;
//         padding:5px 20px;
//         background-color: #fff;
//         border-radius:5px;
//         box-shadow: 0 0 5px;
//         border:none;">取消</button>
//         <button type="button" style="margin:20px 10px;
//         padding:5px 20px;
//         background-color: #fff;
//         border-radius:5px;
//         box-shadow: 0 0 5px;
//         border:none;">确定</button>
//     `;
//     div.style.left = (document.documentElement.scrollLeft + (body.clientWidth / 2)) - (div.offsetWidth / 2) + "px";
//     headX.addEventListener("click", rumfalse);
//     footer.addEventListener("click", function (e) {
//         if (e.target.innerText == "确定") {
//             rumfalse(e);
//             fun && fun();
//         } else if (e.target.innerText == "取消") {
//             rumfalse(e);
//         }
//     });
//     function rumfalse(e) {
//         div1.style.opacity = 1;
//         e.cancelBubble = true;
//         div1.style.transition = "all 0.5s";
//         setTimeout(function () {
//             div1.style.opacity = 0;
//         }, 10);
//         setTimeout(function () {
//             div1.remove(this);
//         }, 300);
//     }
// }